// 拼音
<template>
	<view class="content">
		<custom-navigation :title="title" rightTxt="重新开始" @rightAction="init()"></custom-navigation>
		<view class="hr"></view>
		<!-- <view class="error-count" v-if="errorCount"> 
			错题数:<text>{{errorCount}}</text>
		</view> 
		<h5 v-if="data1.length">剩余问题个数:{{data1.length}}</h5>
		<h5 v-else>问题已全部答完!</h5>
		<table v-if="item">
			<tr>
				<td>问题:</td>
				<td colspan="2" style="width: 150px;">{{item.key}}=<text style="width: 60px;">{{item.res===''?'?':item.res}}</text></td>
				<td style="width: 70px;" :class="{red:item.status=='错误',green:item.status=='正确'}">{{item.status}}</td>
			</tr>
			<tr>
				<td td colspan="2">答案如下</td>
				<td colspan="2">
					<button type="primary" @click="get_item()">下一题</button>
				</td>
			</tr>
			<tr>
				<td colspan="7">
					<view class="list">
						<view class="tcenter inline2" :class="(index%2==1?'inline2':'')" v-for="(item,index) in answer" @click="request(item)">
							{{item}}
						</view>
					</view>
				</td>
			</tr>
		</table> -->
		<div class="pinyin"></div>
		<!-- <img width="100px" height="300px" src="/static/pinyin.jpg" class="sh1ow"> -->
	</view>
</template>

<script>
	import customNavigation from "@/components/custom-navigation/custom-navigation.vue";
	export default {
		components: {
			customNavigation
		},
		data() {
			return {
				title: '',
				data1:[],
				data1_del:[],
				item:null,
				answer:[],
				errorCount:0
			}
		},
		
		onLoad() {
			// 操作数据
			this.init();
			// console.error('this.data1:',JSON.stringify(this.data1))
		},
		onReady() {
			// setTimeout(()=> {this.init();}, 3000);
			this.init()
		},
		methods: {
			getPinYin(){
				let tempArr = [];
				let pingYinArr = []
				// 汉语拼音字母表
				// 一、声母（23个）
				//  b p m f d t n l g k h j q x zh ch sh r z c s y w 
				tempArr = 'b p m f d t n l g k h j q x zh ch sh r z c s y w'.split(' ');
				for (var i = 0; i < tempArr.length; i++) {
					pingYinArr.push({key:tempArr[i],status:'',res:'',type:'声母'})
				}
				// 二、单韵母（6个）
				// a o e i u v
				tempArr = 'a o e i u v'.split(' ');
				for (var i = 0; i < tempArr.length; i++) {
					pingYinArr.push({key:tempArr[i],status:'',res:'',type:'单韵母'})
				}
				// 三、复韵母（9个）
				//  ai ei ui ao ou iu ie ve er 
				tempArr = 'ai ei ui ao ou iu ie ve er'.split(' ');
				for (var i = 0; i < tempArr.length; i++) {
					pingYinArr.push({key:tempArr[i],status:'',res:'',type:'复韵母'})
				}
				// 四、前鼻韵母（5个）
				//  an en in un vn
				tempArr = 'an en in un vn'.split(' ');
				for (var i = 0; i < tempArr.length; i++) {
					pingYinArr.push({key:tempArr[i],status:'',res:'',type:'前鼻韵母'})
				}
				// 五、后鼻韵母（4个）
				//  ang eng ing ong 
				tempArr = 'ang eng ing ong'.split(' ');
				for (var i = 0; i < tempArr.length; i++) {
					pingYinArr.push({key:tempArr[i],status:'',res:'',type:'后鼻韵母'})
				}
				// 六、整体认读音节（16个）
				//  zhi chi shi ri zi ci si yi wu 
				//  yu ye yue yuan yin yun ying 
				tempArr = 'zhi chi shi ri zi ci si yi wu yu ye yue yuan yin yun ying'.split(' ');
				for (var i = 0; i < tempArr.length; i++) {
					pingYinArr.push({key:tempArr[i],status:'',res:'',type:'整体认读音节'})
				}
				
			},
			init(){
				this.errorCount = 0;
				try {
					const pages = getCurrentPages()
					const page = pages[pages.length - 1]
					this.title = page.$holder.navigationBar.titleText;
				} catch (error) {
					
				}
				this.answer = this.getPinYin();
				
				this.data1 = [];
				// this.data1.splice(0,this.data1.length-1);
				for (var i = 1; i <= 10; i++) {
					for (var j = 1; j <= 10-i; j++) {
						this.data1.push({key:(i+'+'+j),status:'',res:''});
					}
				}
				this.get_item();
				this.$forceUpdate();
			},
			request(i){
				if(!this.item.status){
					this.set_status(this.item.key,i);
				}
			},
			//设置答案
			set_status(key,val){
				// console.error({key,val})
				for (var i = 0; i < this.data1.length; i++) {
					const item = this.data1[i];
					if(key == item.key){
						if(eval(key) == val){
							item.res = val;
							item.status = '正确';
							this.data1_del.push(item);
							this.data1.splice(i,1);
							i--;
							continue;
						} else {
							item.res = val;
							item.status = '错误';
							this.errorCount++;
						}
					}
				}
			},
			// 获取剩下的随即值
			get_item(){
				let i = parseInt(Math.random()*100000);
				i = i%this.data1.length;
				if(this.data1[i]){
					this.data1[i].res='';
					this.data1[i].status='';
					this.item = this.data1[i];
				}
			}
		}
	}
</script>

<style>
	.show{ position:absolute; clip:rect(46px 229px 83px 193px); }
	.pinyin{
		width:400px;
		height:400px;
		/* background-image: url(/static/pinyin.jpg); */
		/*  bp -220px -670px ; */
		/*  qx -220px -950px; */
		
		/*  ao -220px -950px; */
		background:transparent url(/static/pinyin.jpg) no-repeat scroll -220px -1410px ;
		/* background-image:url('/static/yanyan.jpg'); */
	}
	.tcenter{
		text-align: center;
		width: 100%;
		/* border-bottom: 1px solid #8f8f94; */
	}
	.content{
		font-size: 30px;
	}
	.list{
		/* border: 1px solid #8f8f94; */
		width: auto;
		height: auto;
		/* display: flex; */
		flex-direction: column;
		flex: 1;
		overflow:scroll;
	}
	.inline1{
		display: inline;
	}
	.inline2{
		display: inline-block;
		width: 48%;
		margin: 3px;
		background-color: bisque;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
